<template>
    <div :class="{'margin-top-1':!isMobile}" class="pagination" v-if="pageList.length!==0">
        <div :class="{disabled:isDisabledPrevPageBtn}" class="pagination-prev-next" v-if="!isMobile&&isShowBtn" @click="cutPage(true)">
            <i class="el-icon-caret-left"></i>
        </div>
        <ul>
            <li v-if="isShowFirstPage" @click="skipPage(firstPage)">{{firstPage}}</li>
            <li class="left" v-if="isShowFirstPage" @click="stepSkip(true)"><i class="el-icon-more"></i></li>
            <li :class="{active:currentPage===i}" v-for="i in showList" :key="i" @click="skipPage(i)">{{i}}</li>
            <li class="right" v-if="isShowLastPage" @click="stepSkip(false)"><i class="el-icon-more"></i></li>
            <li v-if="isShowLastPage" @click="skipPage(lastPage)">{{lastPage}}</li>
        </ul>
        <!-- 下一页按钮 -->
        <div :class="{disabled:isDisabledNextPageBtn}" class="pagination-prev-next" v-if="!isMobile&&isShowBtn" @click="cutPage(false)">
            <i class="el-icon-caret-right"></i>
        </div>
        <div v-if="!isMobile" class="pagination-skip">
            <span>跳至</span>
            <input @keyup.enter="skipPage(inputPage)" class="input" type="text" v-model="inputPage">
            <span>页</span>
        </div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    export default {
        name: 'TqlPagination',
        props: {
            currentPage: { type: Number, required: true },
            pageList: { type: Array, required: true }
        },
        data() {
            return { inputPage: 0 }
        },
        watch: {
            currentPage(newVal) { this.inputPage = newVal }
        },
        computed: {
            ...mapGetters(['isMobile']),
            //第一页
            firstPage({ pageList }) { return [...pageList].shift() },
            //最后一页
            lastPage({ pageList }) { return [...pageList].pop() },
            //是否展示第一页
            isShowFirstPage({ pageList, currentPage }) { return pageList.length > 5 && pageList.indexOf(currentPage) > 2 },
            //是否展示最后一页
            isShowLastPage({ pageList, currentPage }) { return pageList.length > 5 && pageList.indexOf(currentPage) < pageList.length - 3 },
            //是否展示按钮
            isShowBtn({ pageList }) { return pageList.length > 1 },
            //是否禁用上一页按钮
            isDisabledPrevPageBtn({ pageList, currentPage }) { return pageList.indexOf(currentPage) === 0 },
            //是否禁用下一页按钮
            isDisabledNextPageBtn({ pageList, currentPage }) { return pageList.indexOf(currentPage) === pageList.length - 1 },
            //展示列表
            showList({ pageList, currentPage }) {
                let current = this.pageList.indexOf(currentPage)
                return pageList.length < 5 ? pageList : (current < 2 && this.pageList.length > 5) ? this.pageList.slice(0, 5) : (current > 1 && this.pageList.length - current >= 3) ? this.pageList.slice(current - 2, current + 3) : this.pageList.slice(this.pageList.length - 5, this.pageList.length)
            }
        },
        methods: {
            //步长跳转
            stepSkip(tag) { //true向左 / false向右 -默认步长 = 5
                let step = 5
                let current = this.pageList.indexOf(this.currentPage)
                let nextPageIndex = current + (tag ? -step : step)
                if ((tag && nextPageIndex < 0) || (!tag && nextPageIndex > this.pageList.length - 1)) nextPageIndex = tag ? 0 : this.pageList.length - 1
                this.skipPage(this.pageList[nextPageIndex])
            },
            //跳转页
            skipPage(page) {
                if (!this.pageList.includes(parseInt(page))) {
                    this.inputPage = this.currentPage
                    return
                }
                //向父组件发送事件handleCurrentChange传值为 当前页
                this.$emit('handleCurrentChange', parseInt(page))
            },
            //切页
            cutPage(tag) { //tag ? 上一页 : 下一页
                let current = this.pageList.indexOf(this.currentPage) //当前页索引
                if ((tag && current === 0) || (!tag && current === this.pageList.length - 1)) return //中断函数
                let nextPageIndex = current + (tag ? -1 : 1)
                this.skipPage(this.pageList[nextPageIndex])
            }
        }
    }
</script>

<style lang="less" scoped>
    .margin-top-1 {
        margin-top: .1rem;
    }

    .pagination {
        display: flex;
        font-weight: 600;

        .pagination-prev-next {
            cursor: pointer;
            margin: 0 .05rem;
            display: flex;
            justify-content: center;
            align-items: center;

            //下一页按钮
            .el-icon-arrow-right {
                font-size: .16rem;
                font-weight: bold;
            }
        }

        .pagination-skip {
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: .14rem;

            .input {
                text-align: center;
                width: .5rem;
                border: .01rem solid #dcdfe6;
            }
        }
    }

    .active {
        cursor: default;
        color: #EF7A4E;
    }

    .disabled {
        color: #79B4B5 !important;
        cursor: not-allowed !important;
    }


    ul {
        display: flex;

        //左边 省略号 变箭头
        .left {
            &:hover {
                .el-icon-more {
                    &::before {
                        content: "\e6dd";
                    }
                }
            }
        }

        //左边 省略号 变箭头
        .right {
            &:hover {
                .el-icon-more {
                    &::before {
                        content: "\e6dc";
                    }
                }
            }
        }

        li {
            cursor: pointer;
            margin: 0 .05rem;
            font-size: .14rem;
            line-height: .36rem;
            font-weight: bold;
            color: #585E77;

            &:not(.disabled):not(.active):hover {
                color: #02756F;
            }
        }
    }
</style>